<template>
	<div class="box" style="background: #fff;">
		<!-- 表单内容区域 -->
		<div class="form-container">
			<!-- 所属技能分类 -->
			<div class="form-group">
				<label class="form-label">所属技能</label>
				<div class="form-control readonly-control">
					前端技能
				</div>
			</div>

			<!-- 子技能名称 -->
			<div class="form-group">
				<label class="form-label">技能名称 <span class="required">*</span></label>
				<input type="text" class="form-control text-input" v-model="addForm.skillName" placeholder="请输入技能名称"
					maxlength="20" />
				<p class="input-hint">
					{{addForm.skillName.length}}/20
				</p>
			</div>

			<!-- 熟练程度 -->
			<div class="form-group">
				<label class="form-label">熟练程度 <span class="required">*</span></label>
				<div class="skill-level">
					<button class="level-btn" :class="addForm.levae == '入门' ? 'active' : ''"
						@click="addForm.levae = '入门'">入门</button>
					<button class="level-btn" :class="addForm.levae == '熟练' ? 'active' : ''"
						@click="addForm.levae = '熟练'">熟练</button>
					<button class="level-btn" :class="addForm.levae == '精通' ? 'active' : ''"
						@click="addForm.levae = '精通'">精通</button>
				</div>
			</div>

			<!-- 掌握技能详情 -->
			<div class="form-group">
				<label class="form-label">掌握技能详情</label>
				<textarea class="form-control textarea-input" placeholder="请输入掌握技能详情" v-model="addForm.remark"
					maxlength="100" rows="4"></textarea>
				<p class="input-hint">
					{{addForm.remark.length}}/100
				</p>
			</div>
		</div>

		<!-- 底部提交按钮 -->
		<div class="submit-bar">
			<button class="cancel-btn">取消</button>
			<button class="confirm-btn" @click="save">保存</button>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				addForm: {
					levae: '入门',
					skillName: '',
					remark: ''
				}
			}
		},

		onLoad(option) {
			console.log(option , 'option');
			this.addForm = {
				queryId:option.classId,
				_id:option._id,
				levae: '入门',
				skillName: '',
				remark: ''
			}
			if (option._id) {
				this.getDetail()
			}
		},

		methods: {
			async getDetail() {
				let result = await this.$axios('overallSituation', {
					_id: this.addForm._id,
					state: 'look',
					databaseName: 'mySkillDetail'
				})

				if (result.code == 200) {
					this.addForm = result.data[0] || {}
				}
			},


			async save() {
				let parmse = {
					state: this.addForm._id ? 'update' : 'add',
					createTime: this.$getTime(),
					...this.addForm,
					databaseName: 'mySkillDetail'
				}
				let result = await this.$axios("overallSituation", parmse)
				if (result.code == 200) {
					uni.navigateBack({
						delta: 1
					})
				}
			}
		}
	}
</script>

<style scoped>
	/* 基础样式设置 */
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	}

	.back-btn {
		position: absolute;
		left: 20px;
		width: 32px;
		height: 32px;
		background: transparent;
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.back-icon {
		display: inline-block;
		width: 20px;
		height: 20px;
		position: relative;
	}

	.back-icon::before {
		content: '';
		position: absolute;
		width: 10px;
		height: 10px;
		border-left: 2px solid #333;
		border-top: 2px solid #333;
		transform: rotate(-45deg);
		top: 5px;
		left: 5px;
	}

	.header-placeholder {
		width: 32px;
		/* 与返回按钮宽度一致，保持标题居中 */
	}

	/* 表单容器 */
	.form-container {
		height: 89vh;
		overflow-y: auto;
		margin-top: 10px;
		background-color: #fff;
		padding: 15px 20px;
		box-sizing: border-box;
	}

	/* 表单组样式 */
	.form-group {
		margin-bottom: 20px;
	}

	.form-group:last-child {
		margin-bottom: 0;
	}

	.form-label {
		display: block;
		font-size: 15px;
		color: #333;
		margin-bottom: 8px;
		font-weight: 500;
	}

	.required {
		color: #ff4d4f;
	}

	.form-control {
		width: 100%;
		font-size: 16px;
		border-radius: 8px;
		display: flex;
	}

	/* 只读输入框样式 */
	.readonly-control {
		height: 48px;
		display: flex;
		align-items: center;
		padding: 0 16px;
		box-sizing: border-box;
		background-color: #f5f5f7;
		color: #666;
		border: 1px solid #e0e0e0;
	}

	/* 文本输入框样式 */
	.text-input,
	.textarea-input {
		padding: 12px 16px;
		box-sizing: border-box;
		border: 1px solid #e0e0e0;
		color: #333;
		outline: none;
		transition: border-color 0.2s;
	}

	.text-input {
		height: 48px;
	}

	/* 输入提示 */
	.input-hint {
		font-size: 14px;
		color: #999;
		text-align: right;
		margin-top: 8px;
	}

	/* 熟练程度选择 */
	.skill-level {
		display: flex;
		gap: 10px;
	}

	.level-btn {
		flex: 1;
		height: 48px;
		background-color: #f5f5f7;
		color: #666;
		border: 1px solid #e0e0e0;
		border-radius: 8px;
		font-size: 16px;
		transition: all 0.2s;
	}

	.level-btn.active {
		background-color: #e8f5e9;
		color: #42b983;
		border-color: #42b983;
	}

	.level-btn:hover:not(.active) {
		background-color: #eeeeee;
	}

	/* 底部提交按钮栏 */
	.submit-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		padding: 12px 20px;
		box-sizing: border-box;
		border-top: 1px solid #e0e0e0;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.cancel-btn,
	.confirm-btn {
		height: 48px;
		border-radius: 8px;
		font-size: 16px;
		font-weight: 500;
		transition: background-color 0.2s;
		border: none;
		width: 48%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.cancel-btn {
		background-color: #f5f5f7;
		color: #666;
	}

	.cancel-btn:hover {
		background-color: #eeeeee;
	}

	.confirm-btn {
		background-color: #42b983;
		color: #fff;
	}

	.confirm-btn:hover {
		background-color: #359e75;
	}
</style>